import React from 'react';
import { Link } from 'react-router-dom'
import { Menu, Icon, Switch, Layout } from 'antd'
/*import { allMenus } from 'utils/menu'*/
import axios from "axios"
import Top from './header'
import Contents from './content'
import Footer from './bottom'
import './index.less'

const SubMenu = Menu.SubMenu;
const { Sider } = Layout


axios.interceptors.request.use(function (config) {    // 这里的config包含每次请求的内容
    var  type = sessionStorage.getItem("user_token");
    config.headers.user_token = type;
    return config;
}, function (err) {
    return Promise.reject(err);
});
export default class Container extends React.Component {

  state = {
    theme: 'dark',
    current: 'user',
    collapsed: false,
    mode: 'inline',  // 水平垂直展现
    allMenub :[],
    roles:[],
    userName:'',
    authName:"",
    authId:"",

  }
  componentDidMount() {
    this.handleClick([], 'user');
    this.getHeadData();


  }
    getHeadData=()=>{
        axios.get("/auth/users/currentUser").then((res)=>{

            let arr =[];
            let userName="",userId="";
            for(let i = 0 ;i<res.data.roles.length;i++){
                if( i===0){
                    userName=res.data.roles[i].name;
                    userId=res.data.roles[i].id;
                }
                arr.push({
                    id:res.data.roles[i].id,
                    name:res.data.roles[i].name
                })
            }
            //sessionStorage.setItem("userName",userName);
            //sessionStorage.setItem("userId",userId);

            this.setState({
                authName:userName,
                authId:userId,
                userName: res.data.username,
                roles:arr
            });

            this.getMenu(userId);
        })


    }
    getMenu=(n)=>{
      axios.get(`/auth/roles/${n}/menus/assigned`).then((res)=>{

          //let arr =[];
          var arr = [];
          for (var i = 0; i <  res.data.length; i ++ ){
              var father = {};
              father.name = res.data[i].name;
              father.icon = res.data[i].menuIcon;
              father.url = res.data[i].resource;
              if(res.data[i].children.length>0){
                  var children = [];
                  for (let j = 0;j<res.data[i].children.length;j++){
                     /*if(j===0){
                          this.setState({
                              defaultId:res.data[0].children[0].id
                          })
                      }*/
                        var obj  = {};
                      obj.name = res.data[i].children[j].name;
                      obj.url = res.data[i].children[j].resource;
                      obj.icon = res.data[i].children[j].icon;
                      children.push(obj);
                  }
                  father.children = children;
              }
              arr.push(father);
          }

          this.setState({
              allMenub:arr
          })


      })

  }

  changeTheme = (value) => {
    this.setState({
      theme: value ? 'dark' : 'light',
    });
  }
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
      mode: this.state.collapsed ? 'inline' : 'vertical',
    });
  }
  clear = () => {
    this.setState({
      current: 'user',
    });
  }
  handleClick = (e, special) => {
    this.setState({
      current: e.key || special,
    });
  }
  render() {
    return (
      <Layout className="containAll">
        <Sider
          collapsible
          collapsed={this.state.collapsed}
          onCollapse={this.onCollapse}
          className="leftMenu"
        >
          { this.state.theme === 'light' ? <span className="author">圣尊</span> : <span className="author white">圣尊</span> }
          <Menu
            theme={this.state.theme}
            onClick={this.handleClick}

            selectedKeys={[this.state.current]}
            className="menu"

            mode={this.state.mode}
          >
            {
                this.state.allMenub.map((subMenu) => {


                if (subMenu.children && subMenu.children.length) {

                  return (
                    <SubMenu key={subMenu.url} title={<span><Icon type={subMenu.icon} /><span>{subMenu.name}</span></span>}>
                      {subMenu.children.map(menu => (

                        <Menu.Item key={menu.url}><Link to={`/${menu.url}`}>{menu.name}</Link></Menu.Item>
                      ))}
                    </SubMenu>
                  )
                }
                return (

                  <Menu.Item key={subMenu.url}>
                    <Link to={`/${subMenu.url}`}>
                      <Icon type={subMenu.icon} /><span className="nav-text">{subMenu.name}</span>
                    </Link>
                  </Menu.Item>
                )
              })
            }
          </Menu>
          <div className="switch">
            <Switch
              checked={this.state.theme === 'dark'}
              onChange={this.changeTheme}
              checkedChildren="Dark"
              unCheckedChildren="Light"
            />
          </div>
        </Sider>
        <Layout>
          <Top  toggle={this.toggle} roles={this.state.roles} userName={this.state.userName} authName={this.state.authName}  getMenu ={this.getMenu} collapsed={this.state.collapsed} clear={this.clear} />
          <Contents />
          <Footer />
        </Layout>
      </Layout>
    );
  }
}